<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 使用节点操作 在页面上根据数据显示出表格，并且实现删除功能
        var arr = [
            {
                name: 'Jack',
                age: 18,
                gender: '男'
            }, {
                name: 'Rose',
                age: 20,
                gender: '女'
            }, {
                name: 'Top',
                age: 22,
                gender: '男'
            }
        ];
        // 创建tbale标签
        var tableDom = document.createElement('table');
        // 循环创建tr标签以及对应的内容
        arr.forEach(function (item) {
            var trDom = document.createElement('tr');
            // 根据对象下属性循环创建 td标签
            for (var key in item) {
                var td = document.createElement('td');
                td.innerHTML = item[key]
                // 将td加入到tr标签中
                trDom.appendChild(td);
            }
            // 追加删除操作
            var deleteTdDom = document.createElement('td')
            deleteTdDom.innerHTML = '<button onclick="deleteTr(this)">删除</button>';
            trDom.appendChild(deleteTdDom)
            // 将创建的tr加入到table标签中
            tableDom.appendChild(trDom)
        })
        // 将table 加入到页面上
        document.body.appendChild(tableDom)
        function deleteTr(obj) {
            console.log(obj);
            document.querySelector('table').removeChild(obj.parentElement.parentElement)
        }
    </script>
</body>

</html>